<div class="input-group terms-of-service">
    {#
    This is somewhat subtle.
    Checkboxes have a name and value, and when the checkbox is ticked, the form posts
    with name=value. If the checkbox is unticked, the field just isn't present at all.

    This is distinct from 'checked', which determines whether the checkbox appears
    at all. (So, it's not symmetric to the code above.)
    #}
    <label for="id_terms" class="inline-block checkbox">
        <input id="id_terms" class="required" type="checkbox" name="terms"
          {% if form.terms.value() %}checked="checked"{% endif %} />
        <span class="rendered-checkbox"></span>
        {% trans %}I agree to the <a href="{{ root_domain_url }}/policies/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a>.{% endtrans %}
    </label>
    {% if form.terms.errors %}
        {% for error in form.terms.errors %}
        <p class="error help-inline alert alert-error">{{ error }}</p>
        {% endfor %}
    {% endif %}
</div>
